<template>
  <div>
    <el-dialog title="合同信息" v-model="showDialog" :width="dialogWidth" :append-to-body="true" :close-on-click-modal="false">
      <el-form label-width="120px" class="baseForm" :rules="rules" :model="form" ref="baseForm">
        <el-form-item label="合同类型" class="item" prop="typeId">
          <el-select v-model="form.typeId" placeholder="请选择">
            <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同编号" class="item" prop="code">
          <el-input v-model="form.code" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="项目名称" class="item" prop="projectName">
          <el-input v-model="form.projectName" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="备注" class="item" prop="desc">
          <el-input v-model="form.desc" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="客户名称" class="item" prop="customerName">
          <el-input v-model="form.customerName" class="form-input" @focus="check_customer"></el-input>
        </el-form-item>
        <el-form-item label="合同金额" class="item" prop="money">
          <el-input v-model="form.money" class="form-input" type="number">
            <template #append>元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="归属部门" class="item" prop="orgId">
          <el-select v-model="form.orgId" placeholder="请选择" @change="orgChange">
            <el-option v-for="item in orgs" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="销售人员" class="item" prop="salerName">
          <el-input v-model="form.salerName" @focus="check_saler"></el-input>
        </el-form-item>
        <el-form-item label="签订时间" class="item" prop="signTime">
          <el-date-picker class="form-input" v-model="form.signTime" type="date" placeholder="选择日期" value-format="YYYY-MM-DD"></el-date-picker>
          <!-- <el-input v-model="form.signTime" class="form-input"></el-input> -->
        </el-form-item>
        <el-form-item label="付款条件" class="item" prop="payCondition">
          <el-input v-model="form.payCondition" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" class="item" v-if="form.createTime">
          {{ form.createTime.replace('T', ' ').slice(0, 19) }}
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDialog = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit" :disabled="!allowsave">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <dialog-customer ref="r_customer"></dialog-customer>
    <dialog-saler ref="r_saler" :orgId="form.orgId"></dialog-saler>
  </div>
</template>
<script>
import DialogCustomer from '../../components/dialog_customer.vue'
import DialogSaler from '../../components/dialog_saler.vue'
const rules = {
  typeId: [{ required: true, message: '请选择合同类型', trigger: 'change' }],
  code: [{ required: true, message: '合同编号不能为空', trigger: 'blur' }],
  desc: [{ required: true, message: '请输入备注', trigger: 'blur' }],
  projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
  customerName: [{ required: true, message: '请选择客户名称', trigger: 'change' }],
  money: [{ required: true, message: '请输入合同金额', trigger: 'blur' }],
  orgId: [
    {
      validator: function (ru, value, callback) {
        if (!value) return callback(new Error('请选择归属部门'))
        callback()
      },
      trigger: 'change',
    },
  ],
  salerName: [{ required: true, message: '请选择销售人员', trigger: 'blur' }],
  signTime: [{ required: true, message: '请选择合同签订时间', trigger: 'blur' }],
}
export default {
  components: { DialogCustomer, DialogSaler },
  data() {
    return {
      form: {
        typeId: '',
        desc: '',
        projectName: '',
      },
      rules,
      showDialog: false,
      dialogWidth: window.innerWidth > 768 ? '868px' : '100%',
      types: [],
      orgs: [],
      allowsave: true,
    }
  },
  methods: {
    showadd(row) {
      if (row) {
        this.form = Object.assign({}, row)
        this.tables = []
      } else {
        var keys = Object.keys(this.form)
        keys.forEach((it) => {
          this.form[it] = ''
        })
      }

      this.showDialog = true
      setTimeout(() => {
        this.$refs.baseForm.validate(() => {})
      }, 10)
    },
    check_customer({ target }) {
      this.$refs.r_customer.show().then((obj) => {
        if (!obj) return
        this.form.customerName = obj.name
        this.form.customerId = obj.id
      })
      target.blur()
    },
    check_saler({ target }) {
      this.$refs.r_saler.show().then((obj) => {
        if (!obj) return
        this.form.salerId = obj.id
        this.form.salerName = obj.name
      })
      target.blur()
    },
    orgChange() {
      this.form.salerId = 0
      this.form.salerName = ''
      console.log(this.$data)
    },
    saveEdit() {
      this.$refs.baseForm.validate((v) => {
        if (!v) return
        this.$api.contract[this.form.id ? 'update' : 'add'](this.form).then(({ state, msg }) => {
          this.$message[state ? 'success' : 'warning'](msg)
          this.showDialog = false
          this.$emit('search')
        })
      })
    },
  },
  mounted() {
    this.$api.dictionary.enums(2).then(({ msg }) => {
      this.types = msg
    })
    this.$api.dictionary.enums(3).then(({ msg }) => {
      this.orgs = msg
    })
  },
}
</script>
<style lang="scss" scoped>
.baseForm {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  .item.line {
    grid-column: 1/3;
  }
}
</style>
